<template>
    <div id='tmpl'>
        <!-- 轮播图 -->
        <div class="silder">
            <banner :url="url"></banner>
        </div>
        <!--2.0 实现商品购买区-->
        <div id="buy">
			<h4 v-text="info.title"></h4>
			<p class="line"></p>
			<ul>
				<li class="price">
					市场价:<s>￥{{infojg.market_price}}</s>&nbsp;&nbsp;&nbsp;销售价:<span>￥{{infojg.sell_price}}</span>
				</li>
                <li class="inputli">
					购买数量:<inputnumber v-on:dataobj="getcount" class="inputnumber"></inputnumber>
					 <transition name="show" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
						<div v-if="isshow" class="ball"></div>
					</transition> 
				</li>
				<li>
					<mt-button type="primary" size="small">立即购买</mt-button>
					<mt-button type="danger" size="small" @click="toshopcar">加入购物车</mt-button>
				</li>
			</ul>
		</div>
        <!--3.0 图文详情-->
		<!--4.0 商品评论-->
		<div id="other">
			<router-link v-bind="{to:'/goods/gooddesc/'+id}">
			    <mt-button class="imgdesc" type="primary" size="large">图文详情</mt-button>
			</router-link>
            <router-link v-bind="{to:'/goods/goodcomment/'+id}">
                <mt-button type="danger" size="large">商品评论</mt-button>
            </router-link>
		</div>
    </div>
</template>
<script>
//引入轮播图组件
import banner from '../subcom/banner.vue';
import inputnumber from '../subcom/inputnumber.vue';
import {vm,COUNTSTR} from '../../kits/vm.js';
import {setItem,valueobj} from '../../kits/localStorage.js';
import { Toast } from 'mint-ui';
export default {
    data() {
        return {
            isshow:false,
            id: 0,
            url: this.$common.apidomain + '/api/getthumimages/',
            info:{},
            infojg:{},
            inputNumberCount:1
        }
    },
    components: {
        banner,inputnumber
    },
    created() {
        this.id = this.$route.params.getid;
        this.url = this.url + this.id;
        this.getinfo();
        this.getinfojg();
    },
    methods:{
        getinfo(){
            var url = this.$common.apidomain+'/api/goods/getdesc/' + this.id;
            this.$http.get(url).then(function(res){
                 if(res.body.status !== 0){
                    Toast(res.body.message);
                    return;
                }
                this.info = res.body.message[0];
            })
        },
        getinfojg(){
            var url = this.$common.apidomain+'/api/goods/getinfo/' + this.id;
            this.$http.get(url).then(function(res){
                 if(res.body.status !== 0){
                    Toast(res.body.message);
                    return;
                }
                this.infojg = res.body.message[0];
            })
        },
        getcount(count){
            this.inputNumberCount = count;
        },
        toshopcar(){
            vm.$emit(COUNTSTR,this.inputNumberCount);
            valueobj.shopid = this.id;
            valueobj.count = this.inputNumberCount;
            setItem(valueobj);
            this.isshow = !this.isshow;
        },
        beforeEnter(el){
            el.style.transform = "translate(0,0)";
        },
        enter(el,done){
            el.offsetWidth;
            el.style.transform = "translate(80px,346px)";
            done();
        },
        afterEnter(el){
            this.isshow = !this.isshow;
        },
    }
}
</script>
<style lang="css" scoped>
.silder {
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    margin:5px;
}

#buy,
#params,
#other {
    margin: 5px;
    padding: 5px;
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 5px;
}

.line {
    height: 1px;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

#buy ul,
#params ul {
    padding-left: 0px;
}

#buy h4 {
    color: #0094ff;
    padding: 5px;
}

#buy li,
#params li {
    list-style: none;
    padding: 8px;
}

#buy .price span {
    color: red;
}

#other .imgdesc {
    margin-bottom: 20px;
}

.inputli {
    position: relative;
}

.inputnumber {
    position: absolute;
    left: 100px;
    top: 2px;
}

.ball {
    background-color: red;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    position: absolute;
    left: 150px;
    top: 10px;
    transition: all 0.4s ease;
    z-index: 100;
}
</style>